import { Component, Vue } from 'vue-property-decorator'
import styles from './style.less'
import { projectStatus, APP_INTERFACE_TYPE } from '../AuthorizeApp/index'
import SealStatus from '@/components/SealStatus'
import { Action } from 'vuex-class'

/**
 *应用详情
 *
 * @export
 * @class ProjectDetail
 * @extends {Vue}
 */
@Component<ProjectDetail>({
  props: {},
  computed: {},
  methods: {},
  watch: {},
})
export default class ProjectDetail extends Vue {
  private projectId: string = ''
  private detailData: any = {
    iconUrl: '',
    projectId: '',
    projectName: '',
    projectOrganizeName: '',
    developerName: '',
    status: 0,
    validType: 0,
    sealAuthorizeCount: 0,
    projectDescription: '',
  }
  private detailList: any[] = [
    {
      label: '应用图标',
      key: 'iconUrl',
      img: true,
    },
    {
      label: '应用ID',
      key: 'projectId',
    },
    {
      label: '应用名称',
      key: 'projectName',
    },
    {
      label: '应用主管单位',
      key: 'projectOrganizeName',
    },
    {
      label: '应用开发单位',
      key: 'developerName',
    },
    {
      label: '状态',
      key: 'status',
    },
    {
      label: '对接方式',
      key: 'validType',
    },
    {
      label: '已授权印章数量',
      key: 'sealAuthorizeCount',
      hidden: true, // 为0时不显示
    },
    {
      label: '应用描述',
      key: 'projectDescription',
    },
  ]

  @Action('project/queryProjectDeail') private queryProjectDeail!: any
  render() {
    return (
      <div class={styles.projectDetail}>
        <div class="group-item">
          <h1>应用详情</h1>
          <div class="group-inner">
            <ul class="e-detail-list-com">{this.renderDetail()}</ul>
          </div>
        </div>
      </div>
    )
  }

  renderDetail() {
    return this.detailList.map((item: any, i: number) => {
      if (item.hidden && !this.detailData[item.key]) return ''

      return (
        <li>
          <span class="label">{item.label}</span>
          {item.img ? (
            <span class="inner hasImg">
              <el-image
                style="width: 300px; height: 300px"
                class={[{ 'no-icon': !this.detailData[item.key] }]}
                src={
                  this.detailData[item.key] || require('@/assets/no-icon.svg')
                }
              />
            </span>
          ) : (
            <span class={[`inner`, item.key === 'status' && 'dp-ib']}>
              {this.formatDetailInner(item.key)}
              {item.key === 'sealAuthorizeCount' && (
                <el-button type="text" onClick={this.detailSeal}>
                  前往查看
                </el-button>
              )}
            </span>
          )}
        </li>
      )
    })
  }

  /**
   * 转义文案
   * @param key 字段
   */
  private formatDetailInner(key: any) {
    if (key === 'status') {
      return (
        <SealStatus
          statusData={projectStatus.find(
            item => this.detailData[key] === item.key
          )}
        />
      )
    } else if (key === 'validType') {
      return APP_INTERFACE_TYPE[this.detailData[key]]
    }

    return this.detailData[key] || '--'
  }

  detailSeal() {
    this.$router.push({
      name: 'authorizeAppSeal',
      query: { id: this.projectId, name: this.detailData.projectName },
    })
  }

  created() {
    this.projectId = (this.$route.query.id as string) || ''
    if (this.projectId) {
      this.queryProjectDeail({ projectId: this.projectId }).then((res: any) => {
        this.detailData = res
      })
    }
  }
  mounted() {}
  beforeDestroy() {}
}
